 <template>
  <div class="fbgy_box">
    <header-comm v-if="$store.state.tjwz==false"></header-comm>
    <div :class="$store.state.tjwz==false?'bcg':''">
      <div class="fbgy" :class="$store.state.tjwz==true?'tjgl_fbgy':''">
        <div class="head" v-if="$store.state.tjwz">
          <span></span>
          <span>
            <a-icon type="close" @click="close" />
          </span>
        </div>
        <div class="fbgy_inp">
          <ul>
            <li>
              <span class="inp_tit">分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类：</span>
              <a-radio-group @change="flChange" v-model="zlmc">
                <a-radio :value="'轴承'">轴承</a-radio>
                <a-radio :value="'装备'">装备</a-radio>
                <a-radio :value="'零配件'">零配件</a-radio>
              </a-radio-group>
            </li>
            <li>
              <span class="inp_tit">
                <span class="bt">*</span>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：
              </span>
              <a-input
                :style="tsaddress==true?'border-color:red':''"
                style="width:500px"
                type="text"
                placeholder="请输入地址"
                v-model="address"
              />
              <p class="ts" v-if="tsaddress">
                <a-icon type="close-circle" />地址不能为空
              </p>
            </li>
            <li>
              <span class="inp_tit">
                <span class="bt">*</span>供&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;应：
              </span>
              <a-textarea
                style="width:500px; vertical-align: top;"
                :style="tsgynr==true?'border-color:red':''"
                placeholder="请填写供应内容（最多允许输入200个汉字！）"
                :rows="4"
                v-model="gynr"
              />
              <p class="ts" v-if="tsgynr">
                <a-icon type="close-circle" />供应内容不能为空
              </p>
            </li>
            <li>
              <span class="inp_tit">
                <span class="bt">*</span>产&nbsp;&nbsp;品&nbsp;&nbsp;图：
              </span>
              <!-- 开始 上传产品图 -->
              <!-- <span>上传产品图：</span> -->
              <div class="clearfix" style="vertical-align: top!important;">
                <a-upload
                  action="https://www.bearing.cn"
                  listType="picture-card"
                  :fileList="fileList"
                  @preview="handlePreview"
                  @change="handleChange"
                  accept=".jpg"
                >
                  <div v-if="fileList.length < 3">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">上传产品图</div>
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
              <!-- 结束 上传产品图 -->
            </li>
            <li>
              <span class="inp_tit">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</span>
              上传图片不能超过2M
            </li>
            <li class="foot_btn">
              <a-button type="primary" @click="AddGongying">提交</a-button>
              <a-button @click="close">取消</a-button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import qs from "qs";

//上传图片
function getBase64(img, callback) {
  const reader = new FileReader();
  let file = [];
  file = reader;
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
  sessionStorage.setItem("file", reader);
}

export default {
  inject: ["reload"],
  data() {
    return {
      //主营产品----开始
      previewVisible: false,
      previewImage: "",
      fileList: [],
      cptpic: [],
      //主营产品----结束
      //分类
      zlmc: "轴承",
      //地址
      address: "",
      tsaddress: false,
      //供应简介
      gynr: "",
      tsgynr: false,
      thumbUrl: []
    };
  },
  components: {
    headerComm
  },
  methods: {
    //关闭弹窗
    close() {
      this.$store.state.tjwz = false;
      this.$store.state.xggy = false;
    },

    //选择分类
    flChange(e) {
      this.zlmc = e.target.value;
    },

    //提交表单
    AddGongying() {
      //获取地址的值判断
      if (this.address == "") {
        this.tsaddress = true;
        return false;
      } else if (this.gynr == "") {
        this.tsgynr = true;
        return false;
      } else {
        this.tsaddress = false;
        this.tsgynr = false;
      }

      //获取供应简介的值判断
 

      if (this.$store.state.xggy == true) {
        if (this.address != "" && this.gynr != "" && this.fileList != []) {
          if (this.fileList) {
            for (var i = 0; i < this.fileList.length; i++) {
            if(this.fileList[i].url!=undefined){
              this.thumbUrl.push(this.cptpic[i]);
              }else{
              this.thumbUrl.push(this.fileList[i].thumbUrl);

              }
            }
            console.log(this.thumbUrl);
          }

          //供应信息修改
          this.axios
            .post(
              "gongying/GongYingListEdit.php",
              qs.stringify({
                id_num: this.$store.state.gydata.id_num,
                //分类
                zlmc: this.zlmc,
                //地址
                address: this.address,
                //简介
                gynr: this.gynr,
                //主营产品图
                productpic: this.thumbUrl
              })
            )
            .then(res => {
              //console.log(res);
              if (res.data.code == 303) {
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg
                });
                //关闭弹出框
                this.$store.state.tjwz = false;
                this.$store.state.xggy = false;
                this.reload();
              } else {
                this.$notification["error"]({
                  message: "失败",
                  description: res.data.msg
                });
              }
            });
        }
      } else {
        //供应信息添加
        if (this.address != "" && this.gynr != "" && this.fileList != []) {
          if (this.fileList) {
            for (var i = 0; i < this.fileList.length; i++) {
              this.thumbUrl.push(this.fileList[i].thumbUrl);

              
            }
            
          }

          this.axios
            .post(
              "gongying/PushGongYing.php",
              qs.stringify({
                //用户登陆的手机号
                phone: this.$store.state.bbl_phone,
                //授权单位IDd
                sqdwid: this.$store.state.bbl_sqdwid,
                //分类
                zlmc: this.zlmc,
                //地址
                address: this.address,
                //简介
                gynr: this.gynr,
                //主营产品图
                productpic: this.thumbUrl
              })
            )
            .then(res => {
             

              if (res.data.code == 303) {
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg
                });
                this.$store.state.tjwz = false;
                this.thumbUrl = [];
                //需要页面刷新
                this.reload();
              } else {
                this.$notification["error"]({
                  message: "失败",
                  description: res.data.msg
                });
                this.thumbUrl = [];
              }
            });
        }
      }
    },

    
    //------结束 上传产品图
    //主营产品----开始
    handleCancel() {
      this.previewVisible = false;
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },

    handleChange({ fileList }) {
      this.fileList = fileList;
   
    }
    //主营产品----结束
  },

  created() {
    //修改
    if (this.$store.state.xggy == true) {
      this.zlmc = this.$store.state.gydata.zlmc;
      this.address = this.$store.state.gydata.address;
      this.gynr = this.$store.state.gydata.GYNR;
      this.cptpic = this.$store.state.gydata.PIC;
      if (this.cptpic != " ") {
        for (var i = 0; i < this.cptpic.length; i++) {
          let list = {
            uid: i,
            name: " ",
            status: " ",
            url: "http://yb.bearing.cn/" + this.cptpic[i]
          };
          this.fileList.push(list);
        }
              console.log(this.cptpic)

      }
    }
  }
};
</script>

<style lang='less'>
.fbgy_box {
  .tjgl_fbgy {
    width: 62% !important;
    padding: 30px !important;
    top: 40px !important;

    li {
      margin: 11px 0 !important;
    }

    .foot_btn {
      width: 87% !important;
    }
  }

  .fbgy {
    width: 98%;
    height: auto;
    box-shadow: 0px 0px 7px #ccc;
    background-color: #fff;
    margin: 9px auto;
    position: relative;
    top: 63px;
    // transform: translateX(-50%);
    text-align: left;
    padding: 30px 77px;

    .head {
      display: flex;
      justify-content: space-between;

      i {
        font-size: 20px;
      }
    }

    .fbgy_inp {
      ul {
        li {
          margin: 20px 0;

          input {
            vertical-align: middle;
          }

          .inp_tit {
            display: inline-block;
            width: 100px;
            text-align: right;

            .bt {
              display: inline-block;
              color: red;
              margin: 0 5px;
            }
          }

          .ts {
            margin: 7px 0 -7px 96px;
            color: red;
            font-size: 12px;
            i {
              margin: 0 5px;
            }
          }

          //上传图片
          .clearfix {
            width: 80%;
            display: inline-block;
            vertical-align: middle;

            .ant-upload.ant-upload-select-picture-card {
              border: 1px dashed #d9d9d9 !important;
              width: 104px !important;
              height: 104px !important;
            }
          }

          ant-upload.ant-upload-select-picture-card :hover {
            border-color: #40a9ff !important;
          }

          .yblist .cpimgfoot .uploadimg .avatar {
            margin: 0 auto;
          }

          /* you can make up upload button and sample style by using stylesheets */

          .ant-upload-select-picture-card i {
            font-size: 32px;
            color: #999;
          }

          .ant-upload-select-picture-card .ant-upload-text {
            margin-top: 8px;
            color: #666;
          }
        }

        .foot_btn {
          width: 40%;
          text-align: center;

          button {
            margin: 0 20px;
            width: 150px;
          }
        }
      }
    }
  }
}
</style>
